<template>
    <div class="chart" v-loading="loading">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>检查项问题频次排行</span>
                </div>
            </template>
            <div id="examineChart" class="chartsBox" v-show="isShowChart"></div>
            <el-empty description="暂无数据" v-show="!isShowChart"/>
        </el-card>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { problemRanking } from '@/api/bigData/storeInspection.js';
import { nextTick } from 'vue';
const examineChart = shallowRef(null)
const loading = ref(false)
const isShowChart = ref(false)
defineExpose({getData})

function getData(data) {
    loading.value = true;
    let option = {
        legend: {
            data: ['检查项问题频次']
        },
        xAxis: {
            type: 'category',
            data: []
        },
        tooltip: {
            type: 'item'
        },
        grid: {
            top: '30',
            bottom: '30',
            left: '30',
            right: '30'
        },
        yAxis: {
            type: 'value',
            axisLine:{
                show: true
            }
        },
        series: [
            {
                data: [],
                type: 'bar',
                name: '检查项问题频次'
            }
        ]
    };
    let url = `/intelligent/store/problemRanking?serviceId=${toRaw(data).serviceId}&shopId=${toRaw(data).shopId}&startDateTime=${toRaw(data).startDateTime}&endDateTime=${toRaw(data).endDateTime}`
    problemRanking(url).then(res=>{
        if(res.data?.problemRankingList?.length) {
            isShowChart.value = true;
            nextTick(()=>{
                examineChart.value = echarts.init(document.getElementById('examineChart'));
                option.xAxis.data = res.data?.problemRankingList.map((item)=>{
                    return item.typeName
                })
                option.series[0].data = res.data?.problemRankingList.map((item)=>{
                    return item.value
                })
                examineChart.value.setOption(option);
                window.addEventListener('resize', ()=>{
                    setTimeout(() => {examineChart.value.resize();},100)
                })
                loading.value = false
            })
        }else{
            loading.value = false;
            isShowChart.value = false
        }
    })
}

</script>
<style lang="scss" scoped>
.chart {
    width: 100%;
}
.card-header{
    font-weight: bold;
}
.chartsBox {
    width: 100%;
    height: 400px;
}
.el-empty {
    width: 100%;
    height: 400px;
}
</style>